<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">

<h:head>
	<style type="text/css">
	    .ui-diagram-element {   
	        width:6em; 
	        height:4em;     
	        line-height:4em;
	        font-size: 16px;
	        font-weight: bold;
	        text-align: center;
	        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
	        border-radius: 4em;
	        border: 1px solid transparent;
	        background-color: #40E0D0;
	        color: #ffffff;
	    }
	    .ui-diagram-element:hover {
	        background-color: #D3D3D3;
	    }
	    .ui-diagram-element:visited {
	        background-color: red;
	    }
	    
	    .flow-label {
	        font-size: 15px;
	        color: #816A51;
	    }
	    .ui-diagram-start {
			background-color: #8B0000;
			color: #ffffff;
			border-color: #7ab02c;
		}
		.ui-diagram-end {
			background-color: #8B0000;
			color: #ffffff;
			border-color: #7ab02c;
		}	 
		 .ui-diagram-focus {
			background-color: #00db00;
			font-weight: bold;
			color: blue;
			border-color: #00db00;
		}
	    .ui-diagram-success {
	        background-color: #9CB071;
	        color: #ffffff;
	        border-color: #7ab02c;
	    }	 
	    .ui-diagram-fail {
	        background-color: #C34A2C;
	        color: #ffffff;
	    }
	</style>

<script type="text/javascript">
	function handleDrop(event, ui) {
		var draggable = ui.draggable, //draggable element, a jQuery object
		helper = ui.helper, //helper element of draggable, a jQuery object
		position = ui.position, //position of draggable helper
		offset = ui.offset; //absolute position of draggable helper
		alert(ui.draggable);
	}
</script>   
<script type="text/javascript">
    function initDND() {
        $('.ui-treenode-leaf').draggable({
           helper: 'clone',
           scope: 'treetotable',
           zIndex: ++PrimeFaces.zindex
        });
 
        $('.ui-datatable .droppoint').droppable({
           activeClass: 'ui-state-active',
           hoverClass: 'ui-state-highlight',
           tolerance: 'pointer',
           scope: 'treetotable',
           drop: function(event, ui) {
               var property = ui.draggable.find('.ui-treenode-label').text(),
               droppedColumnId = $(this).parents('th:first').attr('id'),
               dropPos = $(this).hasClass('dropleft') ? 0 : 1; 
               treeToTable([
                    {name: 'property', value:  property}
                   ,{name: 'droppedColumnId', value: droppedColumnId}
                   ,{name: 'dropPos', value: dropPos}
               ]);
           }
        });
 
        $('.ui-datatable th').draggable({
           scope: 'tabletotree',
           helper: function() {
               var th = $(this); 
               return th.clone().appendTo(document.body).css('width', th.width());
           }
        });
 
        $('.ui-tree').droppable({
           helper: 'clone',
           scope: 'tabletotree',
           activeClass: 'ui-state-active',
           hoverClass: 'ui-state-highlight',
           tolerance: 'touch',
           drop: function(event, ui) {                               
               tableToTree([
                   {name: 'colIndex', value:  ui.draggable.index()}
               ]);
           }
        });
    }
 
    $(function() {
        initDND();
    });
</script>
</h:head>

<h:body>
<h:form id="form">
    <p:growl id="msgs" showDetail="true" />
	<p:remoteCommand name="rc" update="msgs" actionListener="#{wfmDiagramDesign.rcexecute}" oncomplete="initDND()"/>
	
    <p:panel id="epnl" header="流程节点选择">
		<p:graphicImage id="iconStart" name="images/sys/start_empty.png" onclick="rc()"/>
		<p:draggable for="iconStart" helper="clone" />
		<p:graphicImage id="iconTask" name="images/sys/task_empty.png" />
		<p:draggable for="iconTask" helper="clone" />
		<p:graphicImage id="iconEnd" name="images/sys/end_empty.png" />
		<p:draggable for="iconEnd" revert="true" helper="clone" />
    </p:panel>

    <p:panel id="selectedElements" header="流程设计窗口" style="height:600px">
        <p:diagram id="diagramV" value="#{wfmDiagramDesign.model}" 
            style="height:560px" styleClass="ui-widget-content" >
	        <p:ajax event="connect" listener="#{wfmDiagramDesign.onConnect}" />
	        <p:ajax event="disconnect" listener="#{wfmDiagramDesign.onDisconnect}" />
	        <p:ajax event="connectionChange" listener="#{wfmDiagramDesign.onConnectionChange}" />
        </p:diagram>
    </p:panel>

    <p:droppable for="selectedElements" widgetVar="dropWV" activeStyleClass="ui-state-highlight" onDrop="handleDrop">
        <p:ajax listener="#{wfmDiagramDesign.onElementDrop}"
            update="form selectedElements" />
    </p:droppable>
</h:form>

</h:body>

</html>

